<template>
  <view class="qview">
    <view class="xview">
      <text class="xtit">{{state.info.title}}</text>
      <text class="xjin">{{state.info.descipt}}</text>
    </view>
    <scroll-view scroll-x  class="nquan" v-if="state.coulist">
      <view class="quanitem" v-for="(item,index) in state.coulist" :key="index">
        <view class="quanone">
          <text class="qyuan">{{item.amount}}元</text>
          <text class="qyuanname">优惠券</text>
        </view>
        <text class="jiname">{{item.score}}积分</text>
        <view class="dui" :class="item.status == 1?'qudui':''" @click="getquan(item)">{{item.status_text}}</view>
      </view>
      <!-- <view class="quanitem">
        <view class="quanone">
          <text class="qyuan">200元</text>
          <text class="qyuanname">优惠券</text>
        </view>
        <text class="jiname">6000积分</text>
        <view class="dui qudui">兑换</view>
      </view>
      <view class="quanitem">
        <view class="quanone">
          <text class="qyuan">200元</text>
          <text class="qyuanname">优惠券</text>
        </view>
        <text class="jiname">6000积分</text>
        <view class="dui qudui">兑换</view>
      </view>
      <view class="quanitem">
        <view class="quanone">
          <text class="qyuan">200元</text>
          <text class="qyuanname">优惠券</text>
        </view>
        <text class="jiname">6000积分</text>
        <view class="dui qudui">兑换</view>
      </view> -->
    </scroll-view>
    <view class="njindu">
      <view class="jin">
        <view class="jinitem" :style="{ width: state.info.bfb + '%' }"></view>
      </view>
      <text class="djifen">{{state.info.bfb_title}}</text>
    </view>
  </view>
</template>

<script setup>
  /**
   * 优惠券组件
   */
   import { onMounted, reactive } from 'vue';
  import sheep from '@/sheep';
  const state = reactive({
    coulist: [],
    info:{}
  });
  // 接收参数
  const props = defineProps({
    data: {
      type: Object,
      default: () => ({}),
    },
    styles: {
      type: Object,
      default: () => ({}),
    },
  });
  async function coulist() {
    const { code, data } = await sheep.$api.user.getScoreCoupon();
    // console.log(data)
    state.coulist = data
  }
  async function getScore() {
    const { code, data } = await sheep.$api.user.getScore();
    console.log(data)
    state.info = data
  }
  async function getquan(item) {
    if(item.status == 1){
      const { code, data } = await sheep.$api.user.couduihuan({
        id:item.id
      });
      sheep.$helper.toast('操作成功');
      getScore()
      coulist()
    }
    
  }
  
  getScore()
  coulist()
  // created(async () => {
  //   console.log("+++")
  //   let res = await sheep.$api.user.account.info({
  //       type: state.currentValue,
  //     });
  //     console.log(res)
  //   const { data } = await sheep.$api.user.account.getScoreCoupon({
  //   });
  //   console.log(data)
  // });
</script>

<style lang="scss" scoped>
.qview{
  background-color: #f6f6f6;
  display: flex;
  flex-direction: column;
  padding: 10rpx 0 30rpx;
}
.nquan{
  display: flex;
  flex-direction: row;
  white-space: nowrap;

  
  .quanitem{
    display: inline-block;
    // flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 24%;
    margin-right: 2%;
    .quanone{
      width: 80%;
      height: 88rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background-color: #fb2d35;
      padding: 8rpx 0;
      border-radius: 5rpx;
      min-width: 45px;
      margin: 0 auto;
      .qyuan{
        color: #fff;
        font-size: 32rpx;
        font-weight: 500;
      }
      .qyuanname{
        color: #ffa12c;
        font-size: 24rpx;
        font-weight: 500;
        
      }
    }
    .jiname{
      color: #999;
      font-size: 28rpx;
      display: block;
      margin: 8rpx 0;
      text-align: center;

    }
    .dui{
      padding: 8rpx 15rpx;
      background-color: #585151d6;
      color: #fff;
      font-size: 24rpx;
      font-weight: 400;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50rpx;
    }
    .qudui{
      background-color: #fb2d35;
    }
  }
}
.njindu{
  display: flex;
  flex-direction: column;
  margin-top: 50rpx;
  .jin{
    width: 100%;
    border-radius: 50rpx;
    height: 20rpx;
    background-color: #585151d6;
    .jinitem{
      position: relative;
      width: 0%;
      border-radius: 50rpx;
      background-color: #fb2d35;
      height: 100%;
    }
  }
  .djifen{
    color: #333;
    font-size: 28rpx;
    font-weight: 500;
    display: block;
    text-align: center;
    margin-top: 20rpx;
  }
}
.xview{
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: #fff;
  padding:24rpx 20rpx;
  border-radius: 20rpx;
  margin-bottom: 20rpx;
  .xtit{
    color: #333;
    font-size: 26rpx;
    font-weight: 500;
  }
  .xjin{
    margin-left: auto;
    color: #666;
    font-size: 24rpx;
    font-weight: 400;
  }
}
</style>
